import React from 'react';
import {
  Table,
  Descriptions,
  Button,
  Typography,
  Space,
  Tag,
  message,
  Menu,
  Dropdown,
  Popconfirm,
} from 'antd';
import { UpdateStatus } from '@/services/order';
import { connect } from 'umi';
import moment from 'moment';

const { Text } = Typography;
class ViewPage extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      datas: {
        tMember: {},
      },
    };
  }
  formRef: any = React.createRef();
  componentDidMount() {
    this.fetchDatas();
    const { ParentData } = this.props;
    this.setState({ datas: ParentData });
  }
  fetchDatas = () => {
    this.setState({ loading: true });
    const { ParentData } = this.props;
    let tempControl = 'Edu_OrderDtlProd';
    if (ParentData && ParentData.paymentMtd == 'bean') {
      tempControl = 'Edu_OrderDtl';
    }
    this.props
      .dispatch({
        type: 'Abp/getList',
        payload: { orderId: ParentData.id },
        control: tempControl,
      })
      .then(() => {
        var resp = this.props.response;
        console.log(resp);

        if (resp) {
          var dataSource = resp.result?.items;
          this.setState({ loading: false, dataSource, totalCount: resp.result.totalCount });
        }
      });
  };
  onSelectChange = (selectedRowKeys: any) => {
    this.setState({ selectedRowKeys });
  };
  handleMenuClick = (e: any) => {
    console.log('click', e);
    this.updateStatus(e.key);
  };
  updateStatus = async (status: any) => {
    const { datas } = this.state;
    await UpdateStatus({ Id: datas.id, status }).then((resp) => {
      if (resp.success) {
        message.success('状态修改成功！');
        datas.status = status;
        this.setState({ datas });
      }
    });
  };
  render() {
    const { loading, dataSource, selectedRowKeys, totalCount, pageSize, datas } = this.state;
    const columns: any = [
      {
        title: '序号',
        width: 60,
        align: 'center',
        key: 'index',
        render: (_: any, __: any, i: any) => {
          return i + 1;
        },
      },
      {
        title: '订单编号',
        dataIndex: 'orderNo',
      },
      {
        title: '分录',
        dataIndex: 'orderLine',
      },
      {
        title: '订单数量',
        dataIndex: 'orderQty',
      },
      {
        title: '单价',
        dataIndex: 'unitPrice',
      },
      {
        title: '豆币',
        dataIndex: 'unitBean',
      },
      {
        title: '订单金额',
        dataIndex: 'lineAmt',
      },
      {
        title: '单位',
        dataIndex: 'ium',
      },
      {
        title: '商品名称',
        dataIndex: 'productName',
        render: (text: string, record: any) => <span>{record.tCourse?.title}</span>,
      },

      {
        title: '下单时间',
        width: 200,
        dataIndex: 'creationTime',
        render: (text: string) => <span>{moment(text).format('YYYY-MM-DD hh:mm:ss')}</span>,
      },
    ];
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="已完成">已完成</Menu.Item>
        <Menu.Item key="未付款">未付款</Menu.Item>
        <Menu.Item key="已付款">已付款</Menu.Item>
      </Menu>
    );
    const ConfirmBtn = (
      <Popconfirm title="确定撤销订单?" onConfirm={() => this.updateStatus('已撤销')}>
        <Button danger>撤销</Button>
      </Popconfirm>
    );
    return (
      <>
        <Descriptions
          title="订单详情"
          size={this.state.size}
          extra={[
            <Space>
              <Dropdown.Button overlay={menu}>更改状态</Dropdown.Button>
              <Button type="primary">发货</Button>
              {ConfirmBtn}
            </Space>,
          ]}
        >
          <Descriptions.Item key="1" label="订单编号">
            <Text strong>{datas.orderNo}</Text>
          </Descriptions.Item>
          <Descriptions.Item key="2" label="订单状态">
            <Tag
              color={datas.status == '已完成' ? 'green' : datas.status == '已付款' ? 'blue' : 'red'}
            >
              {datas.status}
            </Tag>
          </Descriptions.Item>
          <Descriptions.Item key="3" label="总金额">
            ￥{' '}
            <Text strong type="danger">
              {datas.totalAmt}
            </Text>
          </Descriptions.Item>
          <Descriptions.Item key="4" label="联系人">
            {datas.contactor}
          </Descriptions.Item>
          <Descriptions.Item key="5" label="联系电话">
            {datas.telphone}
          </Descriptions.Item>
          <Descriptions.Item key="6" label="订单备注">
            {datas.commentText}
          </Descriptions.Item>
          <Descriptions.Item key="7" label="下单时间">
            {moment(datas.creationTime).format('YYYY-MM-DD hh:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item key="8" label="收货地址">
            {datas.shipAddr}
          </Descriptions.Item>
          <Descriptions.Item key="9" label="支付方式">
            {datas.paymentMtd}
          </Descriptions.Item>
          <Descriptions.Item key="10" label="佣金1">
            ￥{' '}
            <Text strong type="danger">
              {datas.commission1}
            </Text>
          </Descriptions.Item>
          <Descriptions.Item key="11" label="佣金2">
            ￥{' '}
            <Text strong type="danger">
              {datas.commission2}
            </Text>
          </Descriptions.Item>
          <Descriptions.Item key="12" label="佣金3">
            ￥{' '}
            <Text strong type="danger">
              {datas.commission3}
            </Text>
          </Descriptions.Item>
          <Descriptions.Item key="13" label="会员">
            {datas.tMember.loginName}
          </Descriptions.Item>
        </Descriptions>
        <Table
          rowKey="id"
          loading={loading}
          rowSelection={rowSelection}
          columns={columns}
          dataSource={dataSource}
          bordered
          size="small"
          pagination={{
            onChange: (page) => {
              this.setState({ pageIndex: page }, () => {
                this.fetchDatas();
              });
            },
            pageSize,
            total: totalCount,
          }}
        />
      </>
    );
  }
}
export default connect(({ Abp }: API.IConnectState) => ({
  response: Abp.response,
  currentUser: Abp.currentUser,
}))(ViewPage);
